// @import '@/uni_modules/uview-ui/theme.scss';
/**
 * 这里是uni-app内置的常用样式变量
 *
 * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
 * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
 *
 */

/**
 * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
 *
 * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
 */

/* ========= 主题颜色变量 ========= */
/* 主题色 */
$theme-color: #AA6999;
$theme-color-light: #C990B3; /* 主题色浅色版本 */
$theme-color-dark: #88547A;  /* 主题色深色版本 */
$theme-color-lightest: #E6D5DE; /* 最浅的主题色，适合背景 */
$theme-color-darkest: #553149; /* 最深的主题色，适合重点强调 */

/* 主题色透明度变体 */
$theme-color-opacity-9: rgba(170, 105, 153, 0.9);
$theme-color-opacity-7: rgba(170, 105, 153, 0.7);
$theme-color-opacity-5: rgba(170, 105, 153, 0.5);
$theme-color-opacity-3: rgba(170, 105, 153, 0.3);
$theme-color-opacity-1: rgba(170, 105, 153, 0.1);

/* 行为相关颜色 */
$uni-color-primary: $theme-color; /* 修改默认主色为我们的主题色 */
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;

/* 文字基本颜色 */
$uni-text-color: #333; /* 基本色 */
$uni-text-color-inverse: #fff; /* 反色 */
$uni-text-color-theme: $theme-color; /* 主题色文字 */
$uni-text-color-theme-dark: $theme-color-dark; /* 深色主题色文字 */
$uni-text-color-grey: #999; /* 辅助灰色，如加载更多的提示信息 */
$uni-text-color-placeholder: #808080;
$uni-text-color-disable: #c0c0c0;

/* 背景颜色 */
$uni-bg-color: #ffffff;
$uni-bg-color-grey: #f8f8f8;
$uni-bg-color-sub: #FAFBFD;
$uni-bg-color-hover: #f1f1f1; /* 点击状态颜色 */
$uni-bg-color-mask: rgba(0, 0, 0, 0.4); /* 遮罩颜色 */
$uni-bg-color-theme: $theme-color; /* 主题色背景 */
$uni-bg-color-theme-light: $theme-color-light; /* 浅色主题背景 */
$uni-bg-color-theme-lighter: $theme-color-lightest; /* 最浅主题背景，适合大面积使用 */

/* 边框颜色 */
$uni-border-color: #c8c7cc;
$uni-border-color-theme: $theme-color; /* 主题色边框 */

/* ========= 尺寸变量 ========= */

/* 文字尺寸 */
$uni-font-size-xs: 10px; /* 额外小 */
$uni-font-size-sm: 12px; /* 小 */
$uni-font-size-base: 14px; /* 基础 */
$uni-font-size-md: 15px; /* 中等 */
$uni-font-size-lg: 16px; /* 大 */
$uni-font-size-xl: 18px; /* 额外大 */
$uni-font-size-xxl: 22px; /* 超大 */

/* 图片尺寸 */
$uni-img-size-sm: 20px;
$uni-img-size-base: 26px;
$uni-img-size-lg: 40px;

/* Border Radius */
$uni-border-radius-xs: 1px; /* 极小圆角 */
$uni-border-radius-sm: 2px; /* 小圆角 */
$uni-border-radius-base: 4px; /* 基础圆角 */
$uni-border-radius-md: 6px; /* 中等圆角 */
$uni-border-radius-lg: 8px; /* 大圆角 */
$uni-border-radius-xl: 12px; /* 特大圆角 */
$uni-border-radius-circle: 50%; /* 圆形 */
$uni-border-radius-pill: 9999px; /* 药丸形状 */

/* 水平间距 */
$uni-spacing-row-xs: 3px; /* 极小间距 */
$uni-spacing-row-sm: 5px; /* 小间距 */
$uni-spacing-row-base: 10px; /* 基础间距 */
$uni-spacing-row-md: 12px; /* 中等间距 */
$uni-spacing-row-lg: 15px; /* 大间距 */
$uni-spacing-row-xl: 20px; /* 特大间距 */
$uni-spacing-row-xxl: 30px; /* 超大间距 */

/* 垂直间距 */
$uni-spacing-col-xs: 3px; /* 极小间距 */
$uni-spacing-col-sm: 5px; /* 小间距 */
$uni-spacing-col-base: 10px; /* 基础间距 */
$uni-spacing-col-md: 12px; /* 中等间距 */
$uni-spacing-col-lg: 15px; /* 大间距 */
$uni-spacing-col-xl: 20px; /* 特大间距 */
$uni-spacing-col-xxl: 30px; /* 超大间距 */

/* 透明度 */
$uni-opacity-disabled: 0.3; /* 组件禁用态的透明度 */
$uni-opacity-light: 0.5; /* 轻度透明 */
$uni-opacity-medium: 0.7; /* 中度透明 */
$uni-opacity-heavy: 0.9; /* 重度透明 */

/* 阴影 */
$uni-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1); /* 小阴影 */
$uni-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12); /* 基础阴影 */
$uni-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.15); /* 大阴影 */
$uni-shadow-xl: 0 6px 12px rgba(0, 0, 0, 0.18); /* 特大阴影 */
$uni-shadow-theme: 0 3px 6px rgba(170, 105, 153, 0.2); /* 带主题色的阴影 */

/* 文章场景相关 */
$uni-color-title: #2C405A; /* 文章标题颜色 */
$uni-font-size-title: 20px;
$uni-color-subtitle: #555555; /* 二级标题颜色 */
$uni-font-size-subtitle: 26px;
$uni-color-paragraph: #3F536E; /* 文章段落颜色 */
$uni-font-size-paragraph: 15px;

/* z-index层级管理 */
$uni-z-index-dropdown: 900; /* 下拉菜单 */
$uni-z-index-sticky: 950; /* 吸顶元素 */
$uni-z-index-fixed: 980; /* 固定定位元素 */
$uni-z-index-modal: 990; /* 模态框 */
$uni-z-index-toast: 1000; /* 轻提示 */
$uni-z-index-loading: 1010; /* 加载提示 */
